<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      // 区别是 node中是先执行所有宏任务 再执行微任务
      // 浏览器是书序执行宏任务和微任务
      function test() {
        console.log("start");
        setTimeout(() => {
          console.log("children2");
          Promise.resolve().then(() => {
            console.log("children2-1");
          });
        }, 0);
        setTimeout(() => {
          console.log("children3");
          Promise.resolve().then(() => {
            console.log("children3-1");
          });
        }, 0);
        Promise.resolve().then(() => {
          console.log("children1");
        });
        console.log("end");
      }

      test();
      // 以上代码在node11以下版本的执行结果(先执行所有的宏任务，再执行微任务)
      // start
      // end
      // children1
      // children2
      // children3
      // children2-1
      // children3-1

      // 以上代码在node11及浏览器的执行结果(顺序执行宏任务和微任务)
      // start
      // end
      // children1
      // children2
      // children2-1
      // children3
      // children3-1
    </script>
  </body>
</html>
